<template>
	<view class="mian">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<Header title="佛器合成"></Header>
		<view class="list">
			<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" style="height: 100%" scroll-y="true">


				<view class="list_son" v-for="(item,index) in 10" :key="index">
					<view class="top">
						<view class="top_left">
							<view class="top_tit">
								合成出云之章
							</view>
							<view class="top_b_tit">
								所需碎片：<text>10</text>
							</view>
						</view>
						<view class="rig button">
							合成
						</view>
					</view>
					<view class="bot">
						<view class="img_sui">
							<view class="sui_son" v-for="(ite,ind) in 10" :key="ind">
								<image src="http://img.cpgm.cc/panda/static/home/suio.png" class="suipian_img" mode="widthFix"></image>
							</view>
						</view>
						<image src="http://img.cpgm.cc/panda/static/home/jiantou.png" class="jiantou" mode="widthFix"></image>
						<view class="rigth_bg">
							<view class="bg_wu">
								<image src="http://img.cpgm.cc/panda/static/home/beij5.png" class="bgys" mode="widthFix"></image>
								<image src="http://img.cpgm.cc/panda/static/home/he1.png" class="wupin" mode="widthFix"></image>
							</view>

						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 到底
			scrolltolower() {
				console.log('123');
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.list {
		height: calc(100vh - 120px);
		padding-bottom: 20px;
	}

	.list_son {
		width: 90%;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		border: 1px solid #FEE1C3;
		margin: 0 auto;
		margin-bottom: 10px;

		.bot {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.rigth_bg {
				width: 77px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.bg_wu {
				width: 57px;
				height: 57px;
				position: relative;

				.wupin {
					width: 47px;
					height: 55px;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.bgys {
					position: absolute;
					width: 100%;
					top: 0%;
					left: 0;
				}
			}

			.jiantou {
				width: 32px;
				height: 20px;
			}

			.img_sui {
				width: 100px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.sui_son {
					width: 20%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 3px;

					.suipian_img {
						width: 17px;
						height: 17px;
					}

				}
			}
		}

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.rig {
				width: 77px;
				height: 33px;
				line-height: 33px;
				text-align: center;
				background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
				border-radius: 6px;
				font-size: 14px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #000000;
			}

			.top_left {
				.top_tit {
					font-size: 15px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 600;
					color: #131314;
					margin-bottom: 2px;
				}

				.top_b_tit {
					font-size: 11px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #343434;

					text {
						color: #239D4C;
					}
				}
			}
		}
	}

	.mian {
		width: 100%;
		height: 100vh;
		background: linear-gradient(90deg, #E5FCFA 0%, #FAE1F4 100%);
	}
</style>